<template>
    <!--注册用户量-->
    <div style="height: 100%;">
        <MyChart
            :option="option"
        />
    </div>
</template>

<script>
    import MyChart from '@/components/charts/MyChart.vue';

    export default {
        name: "CodeReqChart",
        props: {
            // 坐标文字、参考线颜色
            labelColor: String,
        },
        components: {
            MyChart,
        },
        data() {
            return {
            }
        },
        computed: {
            option(){
                let {labelColor} = this;

                let option = {
                    tooltip: {
                        trigger: 'axis',
                        axisPointer: {
                            type: 'cross',
                            label: {
                                backgroundColor: '#6a7985'
                            }
                        }
                    },
                    legend: {
                        data: ['用户注册量', '公共场所注册量']
                    },
                    xAxis: {
                        type: 'category',
                        boundaryGap: false,
                        data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
                    },
                    yAxis: {
                        type: 'value'
                    },
                    series: [
                        {
                            name: '用户注册量',
                            data: [1820, 1932, 1901, 1934, 2290, 2330, 2320],
                            type: 'line',
                            areaStyle: {}
                        },
                        {
                            name: '公共场所注册量',
                            data: [1520, 232, 1401, 1434, 1690, 1730, 1720],
                            type: 'line',
                            areaStyle: {}
                        }
                    ]
                }

                if (labelColor) {
                    // 参考分割线颜色
                    option.splitLine = {
                        lineStyle: {
                            color: labelColor
                        }
                    };
                    // 设置x坐标轴字的颜色
                    option.xAxis.axisLabel = {
                        color: '#ffffff'
                    };
                    // 设置y坐标轴字的颜色
                    option.yAxis.axisLabel = {
                        color: '#ffffff'
                    };

                    option.legend.textStyle = {
                        color: "#ffffff"
                    }
                }

                return option;
            },
        },
    }
</script>

<style scoped>

</style>
